<template>
    <div class="qingwu">
        <div class="admin_table_page_title">
            <a-button @click="$router.back()" class="float_right" icon="arrow-left">返回</a-button>

            <a-modal v-model="visible" title="处理人信息" @ok="confirm" cancelText="取消" okText="确定">
                <a-form-model-item label="姓名">
                    <a-input v-model="username" type="text"/>
                </a-form-model-item>
                <a-form-model-item label="电话">
                    <a-input v-model="phone" type="text"/>
                </a-form-model-item>
                <a-form-model-item label="备注">
                    <a-input v-model="remarks" type="textarea"/>
                </a-form-model-item>
            </a-modal>

            <a-button v-show="info.status == 0" @click="popup" class="float_right" type="primary" style="right: 5px">
                确认处理
            </a-button>
            <a-popconfirm
                title="你确认已经处理完成吗?处理结果不可逆！"
                ok-text="是"
                cancel-text="否"
                @confirm="confirm"
                @cancel="cancel"
                v-show="info.status == 1"
            >
                <a-button class="float_right" type="danger" style="right: 5px">处理完成</a-button>
            </a-popconfirm>
            业主基础信息
        </div>
        <div class="unline underm"></div>
        <div class="admin_form" v-if="info.user">
            <div class="order_info_list">
                <a-row>
                    <a-col :span="8">
                        业主昵称：<span class="content">{{info.user.nickname}}</span>
                    </a-col>
                    <a-col :span="8">
                        状态：
                        <span class="content">
                            <a-tag color="red" v-if="info.status==0">待处理</a-tag>
                            <a-tag color="blue" v-if="info.status==1">处理中</a-tag>
                            <a-tag color="green" v-if="info.status==2">已完成</a-tag>
                        </span>
                    </a-col>
                    <a-col :span="8">
                        提交时间：<span class="content">{{ info.created_at }}</span>
                    </a-col>
                </a-row>
            </div>

            <div class="order_info_list">
                <a-row>
                    <a-col :span="8">
                        业主ID：<span class="content">{{info.user.id||'-'}}</span>
                    </a-col>
                    <a-col :span="8">
                        业主手机号：<span class="content">{{info.user.phone||'-'}}</span>
                    </a-col>
                    <a-col :span="8">
                        业主所在小区：<span class="content">{{info.community.community_name||'-'}}</span>
                    </a-col>
                </a-row>
            </div>

            <div style="margin-top:40px"><span style="font-size: 14px;font-weight: bold;">联系方式</span></div>
            <div class="unline underm"></div>

            <div class="order_info_list">
                <a-row>
                    <a-col :span="8">
                        姓名：<span class="content">{{info.name}}</span>
                    </a-col>
                    <a-col :span="8">
                        手机号：<span class="content">{{ info.mobile }}</span>
                    </a-col>
                </a-row>
            </div>


            <div style="margin-top:40px"><span style="font-size: 14px;font-weight: bold;">报修内容</span></div>
            <div class="unline underm"></div>

            <div class="order_info_list">
                <div class="order_info_list">
                    <a-row>
                        <a-col :span="8">
                            报修类型：
                            <a-tag color="blue">{{info.type_text}}</a-tag>
                        </a-col>

                    </a-row>
                </div>
                <a-row>
                    <a-col :span="8">
                        内容：<span class="content">{{info.content}}</span>
                    </a-col>

                </a-row>
            </div>

            <div style="margin-top:40px"><span style="font-size: 14px;font-weight: bold;">上传图片</span></div>
            <div class="unline underm"></div>

            <div class="admin_table_list">
                <div style="background-color: #ececec; padding: 20px;">
                    <a-row type="flex" justify="space-around">
                        <a-col :span="4" v-for="(item, key) in info.img" :key="key">
                            <a :href="item"><img :src="item" alt="" width="300px"></a>
                        </a-col>
                    </a-row>
                </div>
            </div>

            <div v-show="info.status != 0">
                <div style="margin-top:40px"><span style="font-size: 14px;font-weight: bold;">处理人信息</span></div>
                <div class="unline underm"></div>

                <div class="order_info_list">
                    <a-row>
                        <a-col :span="6">
                            姓名：<span class="content">{{info.username}}</span>
                        </a-col>
                        <a-col :span="6">
                            手机号：<span class="content">{{info.phone}}</span>
                        </a-col>
                        <a-col :span="12">
                            备注：<span class="content">{{info.remarks}}</span>
                        </a-col>

                    </a-row>
                </div>
            </div>

            <br>
            <!-- <a-button type="primary" @click="handleSubmit">提交</a-button> -->
        </div>
    </div>
</template>

<script>
    import wangEditor from "@/components/wangeditor"

    export default {
        components: {wangEditor},
        props: {},
        data() {
            return {
                remarks: '您的报修我们已经收到，24小时内会处理，谢谢您的支持！',
                username: '',
                phone: '',
                visible: false,
                info: {},
                list: [],
                id: 0,
                loading: false,
            };
        },
        watch: {},
        computed: {},
        methods: {
            handleSubmit() {

                // 验证代码处
                // if(this.$isEmpty(this.info.name)){
                //     return this.$message.error('分类名不能为空');
                // }


                let api = this.$apiHandle(this.$api.estateOrders, this.id);
                if (api.status) {
                    this.$put(api.url, this.info).then(res => {
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            return this.$router.back();
                        } else {
                            return this.$message.error(res.msg)
                        }
                    })
                } else {
                    this.$post(api.url, this.info).then(res => {
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            return this.$router.back();
                        } else {
                            return this.$message.error(res.msg)
                        }
                    })
                }
            },
            popup() {
                this.visible = true;
            },
            get_info() {
                this.$get(this.$api.estateMaintain + '/' + this.id).then(res => {
                    this.info = res.data;
                })
            },
            // 获取菜单列表
            onload() {
                // 判断你是否是编辑
                if (!this.$isEmpty(this.$route.params.id)) {
                    this.id = this.$route.params.id;
                    this.get_info();
                }

            },

            confirm(e) {
                if (this.info.status == 0) {
                    if (this.$isEmpty(this.username) || this.$isEmpty(this.phone)) {
                        return this.$message.error('请输入内容');
                    }
                }
                let param = {username: this.username, phone: this.phone, remarks: this.remarks};
                this.$put(this.$api.estateMaintain + '/' + this.id, param).then(res => {
                    if (res.code == 200) {
                        this.visible = false
                        this.$message.success(res.msg);
                        this.onload();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            },


        },
        created() {
            this.onload();
        },
        mounted() {
        }
    };
</script>
<style lang="scss" scoped>
    .admin_editor_span {
        margin-right: 10px;
        border: 1px solid #efefef;
        line-height: 30px;
        padding: 4px 10px;
        border-radius: 3px;
        margin-bottom: 10px;
        cursor: pointer;

        &:hover {
            border-color: #ccc;
        }

        &.check {
            border-color: #ccc;
        }
    }
</style>
